<template>
	<view class="content">
		<image class="bg pa" src="/static/image/scratch_ticket_bg.png"></image>
		<view class="main pr">
			<image class="head_bg" :src="scratch_ticket_title"></image>
			<image class="scratch pa" :src="scratch_ticket_conten"></image>
			<view class="success pa tc" v-show="is_show == 1">
				<view class="success_title">中奖啦！</view>
				<view class="success_desc">恭喜刮中{{score}}</view>
			</view>
			<view class="success pa tc" v-show="is_show == 2">
				<view class="success_title">谢谢参与</view>
				<view class="success_desc">很遗憾 再接再厉</view>
			</view>
			<view class="fail pa tc" v-show="is_show == 3">
				<view class="success_title">抱歉</view>
				<view class="success_desc">{{score}}</view>
			</view>
			<scratch-card refs="card" @luckDraw='luckDraw' @getLuckdraw='getLuckdraw' :disabled="false"></scratch-card>
			<view class="user_score pa tc">我的积分: {{points || 0}}分</view>
		</view>

		<cover-view class="popup pa" v-if="show">
			<cover-view class="pr popup_main" v-if="show == 1">
				<cover-image class="close pa" src="/static/image/scratch_ticket_close.png" @tap.stop="close">
				</cover-image>
				<cover-image class="success_popup_bg pa" :src="scratch_ticket_ok"></cover-image>
				<cover-view class="test_box pr tc">
					<cover-view class="title dib">恭喜您</cover-view>
					<cover-view class="desc">您获得{{score}}</cover-view>
					<cover-view class="go_on dib" @tap.stop="close">{{goOn}}</cover-view>
				</cover-view>
			</cover-view>
			<cover-view class="pr popup_main" v-if="show == 2">
				<cover-image class="close pa" src="/static/image/scratch_ticket_close.png" @tap.stop="close">
				</cover-image>
				<cover-image class="fail_popup_bg pa" :src="scratch_ticket_error">
				</cover-image>
				<cover-view class="test_box pr tc">
					<cover-view class="title dib fail_title">很遗憾！</cover-view>
					<cover-view class="desc">你没有中奖!</cover-view>
					<cover-view class="go_on dib" @tap.stop="close">{{goOn}}</cover-view>
				</cover-view>
			</cover-view>
		</cover-view>
		<view class="x-c" style="padding-top: 20rpx;color: #fff;">每次游戏将花费您{{gameDetail.consume_points}}积分

			<view class="" v-if="free_count != 0">，可免费{{free_count || 0}}次数</view>
		</view>
		<view class="recommend x-bc">更多推荐</view>
		<view class="footer x-bc">
			<view class="">
				<view class="x-f title-box">
					<view class="title">全民推广</view>
					<view class="title_name">就等你</view>
				</view>
				<view class="title-desc">推广任务成功获大额积分</view>
				<view class="go tc" @click="jumpTask">
					立即前往
				</view>
			</view>
			<image src="https://mystore-1304299581.cos.ap-guangzhou.myqcloud.com/static/image/man.png"></image>
		</view>
		<view class="finish_box pf" v-if="finish_status">
			<view class="card pa">
				<view class="name x-c">温馨提示</view>
				<view class="text x-c">每次游戏将花费您{{gameDetail.consume_points}}积分</view>
				<view class="btn x-ac">
					<view class="cancel" @click="cancel">取消</view>
					<view class="finally" @click="finall">确定</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default {
		computed: {
			...mapState({
				user: state => state.user.user, // 用户信息
				points: state => state.init.points, // 积分
				status: state => state.activity.status, // 任务状态
				gameDetail: state => state.game.priseRes // 花费积分
			})
		},
		data() {
			return {
				finish_status: true,
				buttonTitle: '刮一刮',
				score: 0,
				show: 0,
				is_show: 0,
				goOn: '继续抽奖',
				scratch_ticket_error: this.imgUrl + 'scratch_ticket_error.png',
				scratch_ticket_ok: this.imgUrl + 'scratch_ticket_ok.png',
				scratch_ticket_title: this.imgUrl + 'scratch_ticket_title.png',
				scratch_ticket_conten: this.imgUrl + 'scratch_ticket_conten.png',
				free_count: 0, // 免费次数
			}
		},
		watch: {
			title(newVal, oldVal) {
				if (newVal != '谢谢参与' && newVal != '你没有中奖！' && this.status == 1) {
					this.show = 1;
					this.is_show = 1;
				}
				if (newVal == '谢谢参与' && this.status == 1) {
					this.show = 2;
					this.is_show = 2;
				}
				if (this.status != 1) {
					this.is_show = 3;
					this.show = 0;
				}
			}
		},
		mounted() {
			this.free_count = this.gameDetail.free_count
		},
		methods: {
			cancel() {
				this.$Router.back(1)
			},
			finall() {
				this.finish_status = false
			},
			jumpTask() {
				this.$Router.replace({
					path: '/pages/activity/extension/index'
				})
			},
			// 开始抽奖
			getLuckdraw(val) {
				if (this.free_count > 0) {
					this.free_count--
				}
				this.score = val.data
				this.$store.dispatch('init/get_Points');
				this.score = val.data
				if (val.data != '谢谢参与' && val.data != '你没有中奖！' && val.status == 1) {
					this.is_show = 1;
				}
				if (val.data == '谢谢参与' && val.status == 1) {
					this.is_show = 2;
				}
				if (val.status != 1) {
					this.is_show = 3;
				}
			},
			luckDraw(val) {
				if (val.data != '谢谢参与' && val.data != '你没有中奖！' && val.status == 1) {
					this.show = 1;
				}
				if (val.data == '谢谢参与' && val.status == 1) {
					this.show = 2;
				}
				if (val.status != 1) {
					this.show = 0;
				}
			},
			// 关闭弹窗
			close() {
				this.show = 0;
				this.is_show = 0;
			}

		},
	}
</script>
<style lang="scss" scoped>
	@import './index.scss';
</style>
